﻿
@model MVC3DEMO.Models.Post

@{
    ViewBag.Title = "ListPost";
    Layout = "~/Views/Shared/_Layout.cshtml";
    <link rel="stylesheet" href="../../Content/css/news.css" media="all" />
    <script type="text/javascript">
        $(document).ready(function () {
            //Configuration
            var retour = true;
            var tempsTransition = 1000;
            var affichePlayPause = true;
            var lectureAutomatique = false;
            var tempsAttente = 6000;

            var icones = new Array();
            icones['play'] = '../../Content/css/images/play_slider.png';
            icones['pause'] = '../../Content/css/images/pause_slider.png';

            var currentPosition = 0;
            var slideWidth = 560;
            var slides = $('.slide');
            var numberOfSlides = slides.length;
            var interval;
            var lectureEnCours = false;
            // Supprime la scrollbar en JS
            $('#slidesContainer').css('overflow', 'hidden');

            // Attribue  #slideInner  à toutes les div .slide
            slides
    .wrapAll('<div id="slideInner"></div>')
            // Float left to display horizontally, readjust .slides width
	.css({
	    'float': 'left',
	    'width': slideWidth
	});

            // Longueur de #slideInner égale au total de la longueur de tous les slides
            $('#slideInner').css('width', slideWidth * numberOfSlides);

            // Insert controls in the DOM
            $('#slideshow')
    .prepend('<span class="control" id="leftControl">Précédent</span>')
    .append('<span class="control" id="rightControl">Suivant</span>');



            // Hide left arrow control on first load
            manageControls(currentPosition);

            //Crée un écouteur d'évènement de type clic sur les classes .control
            $('.control')
    .bind('click', function () {

        // Determine la nouvelle position
        currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;

        if (currentPosition == numberOfSlides && retour == false) {
            currentPosition--;
            pause();
        }

        // Cache ou montre les controles
        manageControls(currentPosition);
        // Fais bouger le slide
        $('#slideInner').animate({
            'marginLeft': slideWidth * (-currentPosition)
        }, tempsTransition);
    });

            // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
            function manageControls(position) {
                // Cache la fleche "précédent" si on est sur le premier slide
                if (position == 0) { $('#leftControl').hide() } else { $('#leftControl').show() }
                // Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
                if (position == numberOfSlides - 1 && retour == false) {
                    $('#rightControl').hide();
                } else {
                    $('#rightControl').show();
                }
                if (position == numberOfSlides && retour == true) {
                    currentPosition = 0;
                    $('#leftControl').hide();
                }
            }
            function suivant() {
                $('#rightControl').click();
            }
            function start() {
                lectureEnCours = true;
                interval = setInterval(suivant, tempsAttente);
            }
            function pause() {
                lectureEnCours = false;
                clearInterval(interval);
            }

            //Si le diapo est activé 
            if (lectureAutomatique == true) {
                start();
            }
            if (affichePlayPause == true) {
                $('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
                if (lectureAutomatique == true) {
                    $('#navDiapo').attr('src', icones['pause']);
                } else {
                    $('#navDiapo').attr('src', icones['play']);
                }
                $('#navDiapo').bind('click', function () {
                    if (lectureEnCours == true) {
                        $(this).attr('src', icones['play']);
                        pause();
                    } else {
                        $(this).attr('src', icones['pause']);
                        start();
                    }
                });
            }



        });
</script>
}



<div id="pageContainer">

  <!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">	
      <div class="slide">
        <p>Snoupix : Tutoriels Prog & Design</p>
        <p><a href="http://www.snoupix.com"><img src="../../Content/css/images/img_slide_01.jpg" alt="Page d'accueil de Snoupix" width="215" height="145" /></a>Si vous souhaitez en apprendre davantage sur le Web et tous ses secrets, alors le site Web <a href="http://www.snoupix.com">Snoupix.com</a> est fait pour vous.</p><p>Vous y découvrerez un tas de tutos sur le développement en PHP/SQL/Javascript, l'intégration avec HTML/CSS ou encore la création d'interfaces de site web, en passant par l'ActionScript, avec Flash & Flex.</p>
      </div>
      <div class="slide">
      
        <p><a href="http://www.snoupix.com/galerie-d-image-en-as3-et-xml_tutorial_27.html"><img src="../../Content/css/images/img_slide_02.jpg" width="215" height="145" alt="Galerie AS3/XML" /></a><a href="http://www.snoupix.com/galerie-d-image-en-as3-et-xml_tutorial_27.html">Ce tutoriel</a> va vous apprendre à manipuler en ActionScript 3 un document XML afin d'en extraire du contenu. Nous ferons appel à plusieurs outils de Flash avec la classe Tween (qui nous permettra de réaliser des effets) et d'autres composants comme les UILoader intégrés à Flash.</p>
        <p> 
      </div>
      <div class="slide">
        
        <p><a href="http://www.snoupix.com/design-de-site-business_tutorial_23.html"><img src="../../Content/css/images/img_slide_03.jpg" width="215" height="145" alt="Interface web style business" /></a>Voici un tutoriel Photoshop qui vous apprend à faire le design d'un site "business". Ce genre de design est plutôt destiné à des entreprises désirant posséder un site vitrine.</p>
		<p>En plus le fichier Photoshop est disponnible en téléchargement!</p>
      </div>
      <div class="slide">
        
        <p><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/"><img src="../../Content/css/images/img_slide_04.jpg" width="215" height="145" alt="Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril." /></a>Ceci est le dernier slide, si vous n'avez pas activé le retour automatique (dans le javascript), ce slide restera à jamais!</p>
        <p>Aussi, vous pouvez accéder aux tutos de <a href="http://sixrevisions.com/">Six Revisions</a> qui sont à l'origine de cette idée de tutorial (nous l'avons juste amélioré et traduit!). Nous les remercions d'avoir accepter cette petite collaboration!</p>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->

</div>
